<template>
  <div class="main">
    <a-card>
      <div style="display: flex; align-items: center; justify-content: center; padding: 30px 0">
        <h1 style="font-weight: bold; margin: 0; margin-left: 10px">中医药后台</h1>
      </div>
      <a-divider>登录</a-divider>
      <a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit">
        <!-- <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }">
					<a-tab-pane key="tab1" tab="账号密码登录"> -->
        <a-form-item>
          <a-input size="large" type="text" placeholder="请输入您的账号"
            v-decorator="['username', { rules: [{ required: true, message: '请输入您的账号！' }] }]">
            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input type="password" size="large" placeholder="请输入您的密码"
            v-decorator="['pwd', { rules: [{ required: true, message: '请输入您的密码！' }] }]">
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input>
        </a-form-item>
        <!-- </a-tab-pane>
				</a-tabs> -->
        <!-- <a-form-item>
          <a-checkbox>remember me</a-checkbox>
        </a-form-item> -->
        <a-form-item>
          <a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="state.loginBtn"
            :disabled="state.loginBtn">登录</a-button>
        </a-form-item>
      </a-form>
      <div class="copyright">copyright</div>
    </a-card>
  </div>
</template>

<script>
  import storage from 'store'
  import md5 from 'md5'
  import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
  import {
    mapActions
  } from 'vuex'
  import {
    timeFix
  } from '@/utils/util'
  import {
    login,
    get2step
  } from '@/api/login'

  export default {
    components: {
      TwoStepCaptcha,
    },
    data() {
      return {
        customActiveKey: 'tab1',
        loginBtn: false,
        // login type: 0 email, 1 username, 2 telephone
        loginType: 0,
        isLoginError: false,
        requiredTwoStepCaptcha: false,
        stepCaptchaVisible: false,
        form: this.$form.createForm(this),
        state: {
          time: 60,
          loginBtn: false,
          // login type: 0 email, 1 username, 2 telephone
          loginType: 0,
          smsSendBtn: false,
        },
      }
    },
    created() {},
    methods: {
      //...mapActions(['Login', 'Logout']),
      // handler
      handleSubmit(e) {
        e.preventDefault()
        const {
          form: {
            validateFields
          },
          state,
        } = this

        state.loginBtn = true
        validateFields((err, values) => {
          if (!err) {
            console.log('login form', values)
            const loginParams = {
              ...values,
            }
            login(loginParams)
              .then((res) => {
                if (res.code == 0) {
                  if (res.data.status == 2) {
                    this.$notification['error']({
                      message: '商户被封禁',
                      description: '您的商户已被封禁 请联系联系总后台解封',
                      duration: 4,
                    })
                  } else {
                    this.loginSuccess(res);
                  }
                } else {
                  this.$notification['error']({
                    message: res.msg,
                    description: '请求出现错误，请稍后再试',
                    duration: 4,
                  })
                }
              })
              .catch((err) => this.requestFailed(err))
              .finally(() => {
                state.loginBtn = false
              })
          } else {
            setTimeout(() => {
              state.loginBtn = false
            }, 600)
          }
        })
      },
      loginSuccess(res) {
        console.log(res)
        localStorage.setItem('login', true)
        storage.set("userInfo", res.data);
        this.$router.push({
          path: '/',
        })
        // 延迟 1 秒显示欢迎信息
        setTimeout(() => {
          this.$notification.success({
            message: '欢迎',
            description: `${timeFix()}，欢迎回来`,
          })
        }, 1000)
        this.isLoginError = false
      },
      requestFailed(err) {
        this.isLoginError = true
        this.$notification['error']({
          message: '错误',
          description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
          duration: 4,
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .desc {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 12px;
    margin-bottom: 40px;
  }

  .copyright {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    text-align: center;
  }

  .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      height: 40px;
      width: 100%;
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }

      .register {
        float: right;
      }
    }
  }
</style>